<template>
  <div>
    <div class="top">
      <el-row>
        <el-col :span="12"><a href="/">IT港 为所有爱学习的同学</a></el-col>
        <el-col :span="12">
          <el-input placeholder="搜索内容" v-model="searchText">
            <el-button slot="suffix" type="text" icon="el-icon-search" @click="searchData"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <el-backtop>
      <el-button circle type="primary" icon="el-icon-arrow-up"></el-button>
    </el-backtop>
    <div class="center">
      <BlogListItem v-for="(blog,index) in blogs" :key="index"
                    v-bind:blog-item="blog"
                    :style="{marginTop: (index === 0 ? '0px':'20px')}">
      </BlogListItem>
      <p v-if="isLoadingMore">加载中...</p>
    </div>
    <div class="bottom">
      <a href="https://beian.miit.gov.cn/" style="text-align: center">@2023 IT港 - 陕ICP备17022168号-2</a>
    </div>
  </div>
</template>

<script>
import BlogListItem from '@/components/blog/BlogListItem'
import {blogApi} from '@/api/BlogApi'

export default {
  components: {
    BlogListItem
  },
  created () {
    this.getData()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  data () {
    return {
      blogs: [],
      searchText: '',
      isLoadingMore: false,
      hasMoreData: true,
      dataPageInfo: {size: 5, current: 1}
    }
  },
  methods: {
    loadMore () {
      this.isLoadingMore = true
      this.dataPageInfo.current += 1
      this.getData()
      this.isLoadingMore = false
    },
    handleScroll () {
      if (!this.hasMoreData) {
        return
      }
      let scrollTop = document.documentElement.scrollTop
      let windowHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + windowHeight === scrollHeight) {
        this.loadMore()
      }
    },
    getData () {
      let param = Object.assign(this.dataPageInfo, {searchKey: this.searchText})
      blogApi.getAllBlogPage(param).then((res) => {
        if (this.$http.isSuccess(res)) {
          let data = res.data.records
          if (data.length === 0) {
            this.hasMoreData = false
          } else {
            this.blogs = this.blogs.concat(data)
          }
        }
      }).catch(() => {
        this.$message.error('查询失败')
      })
    },
    searchData () {
      this.dataPageInfo = {size: 5, current: 1}
      let param = Object.assign(this.dataPageInfo, {searchKey: this.searchText})
      blogApi.getAllBlogPage(param).then((res) => {
        if (this.$http.isSuccess(res)) {
          this.blogs = res.data.records
        }
      }).catch(() => {
        this.$message.error('查询失败')
      })
    }
  }
}
</script>

<style>

.top {
  width: 100%;
  /*background-color: #f2f2f2;*/
  margin: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
}

.center {
  width: 100%;
  height: 100%;
  min-height: calc(100vh);
  overflow-y: auto;
}

.bottom {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

/*去除a标签下划线*/
a {
  text-decoration: none;
  color: black;
  font-size: 25px;
  /*margin-left: 50px;*/
}

/*去除未被访问的a标签的下划线*/
a:link {
  text-decoration: none;
}

/*去除已经被访问过的a标签的下划线*/
a:visited {
  text-decoration: none;
}

/*去除鼠标悬停时的a标签的下划线*/
a:hover {
  text-decoration: none;
}

/*去除正在点击的a标签的下划线（鼠标按下，尚未松开）*/
a:active {
  text-decoration: none;
}

/*去除获得焦点的a标签的下划线（被鼠标点击过）*/
a:focus {
  text-decoration: none;
}
</style>
